<template>
  <div class="search">
    <div class="search-lf">
      <van-icon name="apps-o" size="25" color="#fff"/>
      <span>分类</span>
    </div>
    <div class="search-cone">
      <van-icon name="search" color="#fff"/>
      <p>搜索鲜花/蛋糕</p>
    </div>
    <div class="search-rf">
      <van-button size="small" color="rgba(255,255,255,.3)">搜索</van-button>
    </div>
  </div>
</template>

<script>
export default {
  
}
</script>

<style lang="scss" scoped>
.search{
  height: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  background:  linear-gradient(to right, #ff34aa, #0a6dee);
  // 
  position: absolute;
  left: 0;
  top: 0;
  &-lf{
    display: flex;
    padding:3px 5px;
    flex-direction: column;
    font-size: 14px;
    color: #fff;
  }
  &-cone{
    height: 30px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    margin: 0 10px;
    background: rgba(255,255,255,.4);
    flex: 1;
    color: #fff;
    span{
      margin-left: 8px;
      font-size: 14px;
    }
  }
  &-rf{
    padding-right: 5px;
  }
}
</style>